<template>
<!--可剪裁的表格-->
  <div style="width: 90%;padding-top: 30px;padding-left: 5%">
      <div> 
  <el-table
    :data="tableData"
    border>
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="300">
    </el-table-column>
    <el-table-column
      prop="name"
      label="书名"
      width="500">
    <template slot-scope="scope">
      <!-- 编辑功能实现的主要功能块 -->
        <div @dblclick="siglechange(scope.$index,1)" @keydown.enter="sigleyes(scope.$index,1)">
        <el-input v-model="scope.row.name" v-show="isedit(scope.$index,1)" size="small" @blur="sigleyes(scope.$index,1)"></el-input>
        <span v-show="!isedit(scope.$index,1)">{{scope.row.name}}</span>
        </div>
      <!--  复用仅需要修改事件绑定回调函数的第二个数字参数，列，以及v-model绑定数据与isedit判断函数传入的，列-->
    </template>
    </el-table-column>
    <el-table-column
      prop="days"
      label="规划用时"
      width="120">
    <template slot-scope="scope">
        <div @dblclick="siglechange(scope.$index,2)" @keydown.enter="sigleyes(scope.$index,2)">
        <el-input v-model="scope.row.days" v-show="isedit(scope.$index,2)" size="small" @blur="sigleyes(scope.$index,2)"></el-input>
        <span v-show="!isedit(scope.$index,2)">{{scope.row.days}}</span>
        </div>
    </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="150">
      <template slot-scope="scope">
        <!-- 这里是按钮区，确定按钮是条件渲染，仅当编辑点下后才出现 -->
        <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">删除</el-button>
        <el-button @click.native.prevent="editRow(scope.$index)" type="text" size="small">编辑</el-button>
        <el-button @click.native.prevent="yesRow(scope.$index)" v-show="showedit[scope.$index]" type="text" size="small">确定</el-button>
      </template>
    </el-table-column>
  </el-table>
      </div>
  <!--可剪裁的表格-->
  <el-row :gutter="20">
      <el-col :span="8"><el-input v-model="bookname" placeholder="请输入待阅书名"></el-input></el-col>
      <el-col :span="8"><el-input v-model="dlday" placeholder="请输入阅读完成天数"></el-input></el-col>
      <el-col :span="8"><el-button @click.native.prevent="yesadd()" type="primary">保存<i class="el-icon-upload el-icon--right"></i></el-button></el-col>
  </el-row>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { nanoid } from 'nanoid'
  export default {
    methods: {
      // 行删除
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      // 行编辑
      editRow(index){
        this.$set(this.showedit,index,true)
      },
      // 行编辑确定
      yesRow(index){
        this.$set(this.showedit,index,false)
        this.$set(this.showsigleeditRow,index,false)
      },
      // 双击编辑（绑定外包div的双击事件）
      siglechange(index,num){
        this.$set(this.showsigleeditRow,index,true)
        this.$set(this.showsigleeditCol,num,true)
      },
      // 双击编辑确定（通过绑定回车按键事件）
      sigleyes(index,num){
        this.$set(this.showsigleeditRow,index,false)
        this.$set(this.showsigleeditCol,num,false)
      },
      // 确定编辑坐标的数组初始化
      setSingleInit(){
        for(var colsigle in this.showsigleeditCol){this.showedit[colsigle] = false}
        for(var rowsigle in this.showsigleeditRow){this.showedit[rowsigle] = false}
      },
      // 是否处于编辑状态的判断函数（三目运算式嵌套）
      isedit(index,num){
        return (this.showedit[index]?true:this.showsigleeditRow[index]?this.showsigleeditCol[num]?true:false:false)
      },
      yesadd(){
            const timestamp = new Date().getTime();
            var today = dayjs(timestamp).format('YYYY-MM-DD')
            const booktoread = {id:nanoid(),date:today,name:this.bookname,days:this.dlday}
            this.tableData.unshift(booktoread)
            this.bookname=''
            this.dlday=''
      }
    },
    computed:{
      // 返回数据总数
        total(){
          return this.tableData.length
        },
    },
    mounted(){
  // 标识数组的初始化
    for(var i=0;i<this.total;i++){
        this.showedit[i] = false}
        this.setSingleInit()
    },
  // 检测用户修改
    watch:{
        tableData: {
            deep:true,
            handler(value){
              localStorage.setItem('bookReadPlan',JSON.stringify(value))
            }
        }
    },
    data() {
      return {
        bookname:'',
        dlday:'',
        // 行编辑标识数组
        showedit:[],
        // 双击编辑标识的两个数组（储存$index以及列数（人工传入））
        showsigleeditCol:[],
        showsigleeditRow:[],
        // 保存输出数据
        tableData: JSON.parse(localStorage.getItem('bookReadPlan')) || []
      }
    },
  }
</script>

<style scoped>

</style>